<template>
    <el-form label-width="auto">
        <el-form-item label="是否添加前置服务">
            <el-radio-group v-model="actionInfo.isAddBeforeThirdExec">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-divider v-if="actionInfo.isAddBeforeThirdExec"></el-divider>
        <el-alert v-if="actionInfo.isAddBeforeThirdExec" title="前置服务只对 服务调用 功能生效" type="info" center show-icon :closable="false"/>
        <br />
        <el-form-item label="三方服务编码" v-if="actionInfo.isAddBeforeThirdExec">
            <el-select v-model="actionInfo.beforeThirdExecCode" placeholder="三方服务编码" clearable style="width: 100%"
                       @change="thirdExecBeforeChange(actionInfo.beforeThirdExecCode, actionInfo)"
                       @clear="thirdExecBeforeClear(actionInfo)">
                <el-option v-for="info in thirdExecList" :label="info.code" :value="info.code"/>
            </el-select>
        </el-form-item>
        <el-form-item label="参数配置" v-if="actionInfo.isAddBeforeThirdExec">
            <el-table :data="actionInfo.beforeExecParamJson ? actionInfo.beforeExecParamJson : []" :border="true"
                      :stripe="true"
                      :show-overflow-tooltip="true"
                      :max-height="200"
                      style="width: 100%;">
                <el-table-column prop="name" label="字段名称"></el-table-column>
                <el-table-column prop="type" label="字段类型"></el-table-column>
                <el-table-column prop="description" label="字段描述"></el-table-column>
                <el-table-column prop="value" label="字段值">
                    <template #default="scope">
                        <el-input v-model="scope.row.showInfo" @click="valueClick(scope, actionInfo.beforeExecParamJson)"/>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-divider v-if="actionInfo.isAddBeforeThirdExec"></el-divider>

        <el-form-item label="数据类型">
            <el-radio-group v-model="actionInfo.optionValueType">
                <el-radio label="custom">自定义</el-radio>
                <el-radio label="variable">绑定参数</el-radio>
                <el-radio label="api">服务调用</el-radio>
                <el-radio label="dataDict">数据字典</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="参数值" v-if="actionInfo.optionValueType === 'custom'">
            <el-input v-model="actionInfo.optionsCustom" style="width: 100%">
                <template #prepend>
                    <el-select v-model="actionInfo.optionsCustomValueType" placeholder="Select" style="width: 115px">
                        <el-option label="字符串" value="String" />
                        <el-option label="数组" value="Array" />
                        <el-option label="对象" value="Object" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>

        <el-form-item label="绑定参数" v-if="actionInfo.optionValueType === 'variable'">
            <el-select v-model="actionInfo.optionsVariableParam" placeholder="参数名称" style="width: 100%">
                <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
            </el-select>
        </el-form-item>

        <el-form-item label="参数值" v-if="actionInfo.optionValueType === 'api'">
            <el-input v-model="actionInfo.apiResponseJsonPath" style="width: 100%" placeholder="返回值设置JsonPath"/>
        </el-form-item>

        <el-form-item label="调用方式" v-if="actionInfo.optionValueType === 'api'">
            <!-- MSSA Microsoft Service Share Api -->
            <!-- MSOA Microsoft Service Owned Api -->
            <!-- RTSA RestTemplate Service Share Api -->
            <el-radio-group v-model="actionInfo.apiType">
                <el-radio label="MSSA">微服务共享API</el-radio>
                <el-radio label="MSOA">微服务自有API</el-radio>
                <el-radio label="RTSA">通用透传API</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="服务地址" v-if="actionInfo.optionValueType === 'api'">
            <el-input v-model="actionInfo.apiPath" style="width: 100%" placeholder="文本内容" />
        </el-form-item>

        <el-form-item label="请求方式" v-if="actionInfo.optionValueType === 'api'">
            <el-radio-group v-model="actionInfo.apiMethod">
                <el-radio label="GET">GET请求</el-radio>
                <el-radio label="POST">POST请求</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="数据字典" v-if="actionInfo.optionValueType === 'dataDict'">
            <el-select v-model="actionInfo.optionsDataDict" placeholder="选择数据字典" @visible-change="getDataDictList">
                <el-option :label="item.name" :value="item.name" v-for="item in dataDictList"/>
            </el-select>
        </el-form-item>

        <el-form-item label="返回值设置" v-if="actionInfo.optionValueType === 'dataDict'">
            <el-input v-model="actionInfo.apiResponseJsonPath" style="width: 100%" placeholder="返回值设置JsonPath"/>
        </el-form-item>


        <div style="display: flex; justify-content: center; align-items: center" v-if="actionInfo.optionValueType === 'api' && actionInfo.isAddBeforeThirdExec === false">
            <el-button type="primary" class="addCollapse" size="small" @click="addParamVariable()">添加入参</el-button>
        </div>
        <el-form :model="actionInfo" label-width="auto" style="width: 100%" v-if="actionInfo.optionValueType === 'api' && actionInfo.isAddBeforeThirdExec === false">
            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in actionInfo.apiParamList">
                    <template #title>
                        <div class="collapseTitle">
                            <span>参数 {{(index + 1)}}</span>
                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteParamVariable(index)">删除</el-button>
                        </div>
                    </template>
                    <el-form-item label="来源类型">
                        <el-radio-group v-model="item.type">
                            <el-radio label="custom">自定义</el-radio>
                            <el-radio label="variable">关联变量</el-radio>
                            <el-radio label="urlQuery">URL地址变量</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="参数名称" v-if="item.type === 'custom'">
                        <el-input v-model="item.variableName" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="参数值" v-if="item.type === 'custom'">
                        <el-input v-model="item.variableValue" style="width: 100%">
                            <template #prepend>
                                <el-select v-model="item.variableType" placeholder="Select" style="width: 115px">
                                    <el-option label="字符串" value="String" />
                                    <el-option label="数组" value="Array" />
                                    <el-option label="对象" value="Object" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="赋值参数名称" v-if="item.type === 'urlQuery'">
                        <el-input v-model="item.variableName" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="URL地址参数名称" v-if="item.type === 'urlQuery'">
                        <el-input v-model="item.variableValue" style="width: 100%" />
                    </el-form-item>

                    <el-form-item label="参数名称" v-if="item.type === 'variable'">
                        <el-input v-model="item.variableName" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="变量名称" v-if="item.type === 'variable'">
                        <el-select v-model="item.variableParamName" placeholder="变量名称" style="width: 100%">
                            <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                        </el-select>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>



        <el-form-item label="是否添加后置服务">
            <el-radio-group v-model="actionInfo.isAddAfterThirdExec">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-divider v-if="actionInfo.isAddAfterThirdExec"></el-divider>
        <el-alert v-if="actionInfo.isAddAfterThirdExec" title="后置服务只对 服务调用/数据字典 功能生效" type="info" center show-icon :closable="false"/>
        <br />
        <el-form-item label="三方服务编码" v-if="actionInfo.isAddAfterThirdExec">
            <el-select v-model="actionInfo.afterThirdExecCode" placeholder="三方服务编码" style="width: 100%" clearable
                       @change="thirdExecAfterChange(actionInfo.afterThirdExecCode, actionInfo)"
                       @clear="thirdExecAfterClear(actionInfo)">
                <el-option v-for="info in thirdExecList" :label="info.code" :value="info.code"/>
            </el-select>
        </el-form-item>
        <el-form-item label="参数配置" v-if="actionInfo.isAddAfterThirdExec">
            <el-table :data="actionInfo.afterExecParamJson ? actionInfo.afterExecParamJson : []" :border="true"
                      :stripe="true"
                      :show-overflow-tooltip="true"
                      :max-height="200"
                      style="width: 100%;">
                <el-table-column prop="name" label="字段名称"></el-table-column>
                <el-table-column prop="type" label="字段类型"></el-table-column>
                <el-table-column prop="description" label="字段描述"></el-table-column>
                <el-table-column prop="value" label="字段值">
                    <template #default="scope">
                        <el-input v-model="scope.row.showInfo" @click="valueClick(scope, actionInfo.afterExecParamJson)"/>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-divider v-if="actionInfo.isAddAfterThirdExec"></el-divider>
    </el-form>


    <el-dialog v-model="dialogVisible" title="参数配置" width="30%">
        <el-form>
            <el-form-item label="类型" label-width="20%">
                <el-radio-group v-model="formInfo.selectType">
                    <el-radio label="variable">关联变量</el-radio>
                    <el-radio label="custom">自定义</el-radio>
                </el-radio-group>
            </el-form-item>
            <br />
            <el-form-item v-if="formInfo.selectType === 'custom'" label="值" label-width="20%">
                <el-input v-model="formInfo.customContent" />
            </el-form-item>
            <el-form-item v-if="formInfo.selectType === 'variable'" label="值" label-width="20%">
                <el-select v-model="formInfo.variableName" placeholder="变量名称" style="width: 100%">
                    <el-option v-for="info in commonParam" :label="info.variableName" :value="info.variableName" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitDialog()">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import {getDataDictList, getThirdExec} from "@/request/lowcode";

export default {
    name: "CommonThirdServiceValue",
    props: ['actionInfo', 'commonParam'],
    data() {
        return {
            thirdExecList: [],
            dialogVisible: false,
            formInfo: {selectType: "custom", customContent: "", variableName: ""},
            currentOperationIndex: -1,
            dialogExecParamJson: [],
            dataDictList: null
        }
    },
    methods: {
        addParamVariable() {
            if (!this.actionInfo.apiParamList) {
                this.actionInfo.apiParamList = []
            }
            let variableInfo = {variableName: "", variableValue: "", variableType: "String", type: "custom", globalVariableName: "", globalVariableParamName:""}
            this.actionInfo.apiParamList.push(variableInfo)
        },
        deleteParamVariable(index) {
            // 删除数组中的数据
            this.actionInfo.apiParamList.splice(index, 1);
        },
        thirdExecBeforeChange(code, item) {
            // 遍历所有列表，根据code查询出对应的execParam
            let execParam = "";
            for (let index = 0; index < this.thirdExecList.length; index++) {
                let info = this.thirdExecList[index]
                if (info.code === code) {
                    execParam = info.execParam
                    break
                }
            }
            if (execParam) {
                item.beforeExecParamJson = JSON.parse(execParam)
            } else {
                item.beforeExecParamJson = []
            }
        },
        thirdExecBeforeClear(item) {
            item.beforeExecParamJson = []
        },
        valueClick(scope, execParamJson) {
            this.dialogExecParamJson = execParamJson;
            this.currentOperationIndex = scope.$index
            let row = scope.row
            if (row.execParamInfo) {
                this.formInfo = row.execParamInfo;
            } else {
                this.formInfo = {selectType: "custom", customContent: "", variableName: ""};
            }
            this.dialogVisible = true
        },
        submitDialog() {
            this.dialogVisible = false
            let formInfo = this.dialogExecParamJson[this.currentOperationIndex]
            formInfo.execParamInfo = this.formInfo;
            if (formInfo.execParamInfo.selectType === 'custom') {
                formInfo.showInfo = formInfo.execParamInfo.customContent
            } else {
                formInfo.showInfo = "变量." + formInfo.execParamInfo.variableName
            }
        },
        thirdExecAfterChange(code, item) {
            // 遍历所有列表，根据code查询出对应的execParam
            let execParam = "";
            for (let index = 0; index < this.thirdExecList.length; index++) {
                let info = this.thirdExecList[index]
                if (info.code === code) {
                    execParam = info.execParam
                    break
                }
            }
            if (execParam) {
                item.afterExecParamJson = JSON.parse(execParam)
            } else {
                item.afterExecParamJson = []
            }
        },
        thirdExecAfterClear(item) {
            item.afterExecParamJson = []
        },
        getDataDictList(isOpen) {
            if (isOpen && this.dataDictList === null) {
                // 查询数据字典列表
                let param = {
                    pageInfo: {
                        pageIndex: 1,
                        pageSize: 10000
                    }
                }
                getDataDictList(param).then(res => {
                    this.dataDictList = res.data.dataList
                })
            }
        }
    },
    created() {
        // 查询三方服务列表
        let param = {
            pageInfo: {
                pageIndex: 1,
                pageSize: 1000
            }
        }
        getThirdExec(param).then(res => {
            this.thirdExecList = res.data.dataList;
        })
    }
}
</script>

<style scoped lang="less">

</style>